(function (){
    var box = document.getElementById('box');
    var imgLeft = box.getElementsByTagName('img')[0];
    var mask = document.getElementById('mask');
    var eyesWindow = document.getElementById('eyesWindow');
    box.onmouseenter = function(e){
        e = e || window.event;
        mask.style.display = 'block';
        eyesWindow.style.display = 'block';
    }
    
    box.onmouseleave = function(e){
        e = e || window.event;
        mask.style.display = 'none';
        eyesWindow.style.display = 'none';
    }
    
    box.onmousemove = function(e){
        e = e || window.event;
        setImg(e);
        
    
    }
    
    function setImg(e){
        var tempL = 0;
        var temT = 0;
        var maxL = 146;
        var maxT = 146;
        var minL = 0;
        var minT = 0;
        tempL = e.clientX - mask.offsetWidth/2;
        temT = e.clientY - mask.offsetHeight/2;
        if(tempL >= maxL){
            tempL = maxL;
        }else if(tempL <= minL){
            tempL = minL
        }else{
            tempL = tempL;
        }
    
        if(temT >= maxT){
            temT = maxT;
        }else if(temT <= minT){
            temT = minT;
        }else{
            temT = temT;
        }
    
        mask.style.left = tempL + 'px';
        mask.style.top = temT + 'px';
        var tempL2 = -2.15*tempL;
        var tempT2 = -2.15*temT;
        var img1 = eyesWindow.querySelector('img');
        
        eyesWindow.getElementsByTagName('img')[0].style.left = tempL2 + 'px';
        img1.style.top = tempT2 + 'px';
    }
    
    
    
})();